<template>
	<div>
		<el-container>
		  <el-header>
			  <top></top>
			</el-header>
		  <el-container >
		    <el-aside width="200px">
				<myaside></myaside>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
			
		  </el-container>
		</el-container>
	</div>
</template>

<script>
	import top from './top.vue'
	import myaside from './myaside.vue'
  export default {
	  name:'main',
	  components:{
		  top,
		  myaside
	  }
    
  }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
*{
	margin: 0;
	padding: 0;
}

 .el-header, .el-footer {
   
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #545c64;
    color: #333;
    text-align: center;
  }

  
  .el-main {
   
    color: #333;
    text-align: center;
  
  }
  
 .el-container {
     height: 100vh;
	
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
   
  }
  
  .el-container:nth-child(7) .el-aside {
   
  }
  
</style>
